import { createSlice } from '@reduxjs/toolkit'

export const taskSlice = createSlice({
  name: 'task',
  initialState: {
    list: [
      {
        id: 0,
        title: '我是一条测试任务',
        status: 'undo'
      }, {
        id: 1,
        title: '测试任务可以删除',
        status: 'doing'
      }, {
        id: 2,
        title: '测试任务可以编辑成自己的任务哦',
        status: 'done'
      }
    ],
    isEdit: false, // 当前是否在编辑或者新增任务状态
    editTaskItem: null
  },
  reducers: {
    addTask: (state, action) => {
      // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
      // 并不是真正的改变状态值，因为它使用了 Immer 库
      // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
      // 不可变的状态
      if (action.payload && action.payload.item) {
        let {status, id, title} = action.payload.item;
        state.list.push({status, id, title});
      }
    },

    deleteTask: (state, action) => {
      // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
      // 并不是真正的改变状态值，因为它使用了 Immer 库
      // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
      // 不可变的状态
      if (action.payload && action.payload.id) {
        let id = action.payload.id;
        let index = state.list.findIndex((item) => {
          return id === item.id;
        });
        state.list.splice(index, 1);
      }
    },

    /**
     * 编辑任务
     * @param {Object} state 
     * @param {Object} action 
     */
    editTask: (state, action) => {
      let newTask = action.payload;
      let index = state.list.findIndex((item) => {
        return newTask.item.id === item.id;
      });
      if (index === -1) {
        return;
      }
      const {status, id, title} = newTask.item;
      state.list.splice(index, 1, {
        status,
        id,
        title
      });
      console.log('--task edit--:', state, action);
    },

    updateTask: (state, action) => {
      state.list = action.list
    },
    /**
     * 修改新增弹框状态
     * @param {Object} state 
     * @param {Object} action 
     * @returns 
     */
    toggleEdit: (state, action) => {
      const payload = action.payload;
      console.log('--toggleEdit--:', action);
      if (typeof payload !== 'undefined') {
        state.isEdit = payload.status;
        return;
      }
      state.isEdit = !state.isEdit;
    },
    /**
     * 设置当前正在修改的任务
     * @param {Object} state 
     * @param {Object} action 
     */
    setEditTask: (state, action) => {
      const payload = action.payload;
      console.log('--setEditTask--:0', action);
      if (!payload) {
        return;
      }
      const editId = payload.id;
      const editTask = state.list.filter((item) => {
        return item.id === editId
      });
      console.log('--setEditTask--:1',  state.list[0].id, editTask[0].id);
      const {status, id, title} = editTask[0]
      state.editTaskItem = {
        status,
        id,
        title
      };
    },
    /**
     * 清除当前正在编辑的任务
     * @param {Object} state 
     */
    clearEditTask: (state) => {
      state.editTaskItem = null;
    }
  }
})
// 每个 case reducer 函数会生成对应的 Action creators
export const { addTask, editTask, updateTask, toggleEdit, setEditTask, clearEditTask, deleteTask } = taskSlice.actions

export default taskSlice.reducer